<template>
    <div class="workbench">
        
        <div class="workbench_title">
            <div :class="{ workbench_title_checked: flag == tabItem }" v-for="(tabItem, index) in tabList"
                :key="index + 'tabList'" @click.stop.prevent="appClickFn(tabItem)">
                <span>{{ tabItem }}</span>
                <img v-if="index != 0 && flag != tabItem" src="static/image/screen/tab_close.png"
                    @click.stop.prevent="closeAppFn(tabItem)" />
                <img v-if="index != 0 && flag == tabItem" src="static/image/screen/tab_close_white.png"
                    @click.stop.prevent="closeAppFn(tabItem)" />
            </div>
        </div>
        <div class="workbench_content" v-if="flag == '工作台'">
            <div class="workbench_content_now workbench_content_app">
                <div class="workbench_content_app_t">最近使用</div>
                <div class="workbench_content_app_c">
                    <div v-for="(nowItem, index) in nowAppList" :key="index + 'nowAppList'"
                        @click.stop.prevent="appClickFn(nowItem.val)">
                        <img :src="nowItem.src" />
                        <div>{{ nowItem.val }}</div>
                    </div>
                </div>
            </div>
            <div class="workbench_content_all workbench_content_app">
                <div class="workbench_content_app_t">我的应用</div>
                <div class="workbench_content_app_n">
                    <div :class="{ workbench_content_app_n_bgc: changFlag == index }"
                        v-for="(allTabListItem, index) in allTabList" :key="index + 'allTabList'"
                        @click.stop.prevent="changeTabAppFn(allTabListItem, index)">{{ allTabListItem }}</div>
                </div>
                <div class="workbench_content_app_c">
                    <div v-for="(allItem, index) in allChangeAppList" :key="index + 'allChangeAppList'"
                        @click.stop.prevent="appClickFn(allItem.val)">
                        <img :src="allItem.src" />
                        <div>{{ allItem.val }}</div>
                    </div>
                </div>
            </div>
        </div>
        <Remote class="workbench_content" v-if="flag == '远程控制'"></Remote>
        <Screen class="workbench_content" v-if="flag == '同屏观看' && isConnectRemoteServer"
            :screenPersonList="screenPersonList" :isUpdateUser="isUpdateUser" :oldScreenPersonList="oldScreenPersonList"
            :isAutoOpenScreen="isAutoOpenScreen" :globalOverScreen="globalOverScreen" @getPersonFn="getPersonFn"
            @globalOverScreenFn="globalOverScreenFn"></Screen>
    </div>
</template>
<script>
import Screen from "./screen/screen"
import Remote from "./remote/remote"
export default {
    props: {
        screenPersonList: {// 同屏邀请
            type: Array,
            default: () => {
                return []
            }
        },
        isUpdateUser: {
            type: Boolean,
            default: false
        },
        oldScreenPersonList: {// 上一次同屏邀请
            type: Array,
            default: () => {
                return []
            }
        },
        isAutoOpenScreen: {
            type: Boolean,
            default: false
        },
    },
    components: {
        Screen,
        Remote
    },
    data() {
        return {
            tabList: ["工作台"],
            allTabList: ["全部", "远程应用", "同屏应用", "签到应用"],
            nowAppList: [
                // {
                //     src: "static/image/screen/app_remote_control.png",
                //     val: "远程控制"
                // },
                {
                    src: "static/image/screen/app_same_screen.png",
                    val: "同屏观看"
                },
                // {
                //     src: "static/image/screen/app_sign_in.png",
                //     val: "考勤签到"
                // }
            ],
            allAppList: [
                {
                    src: "static/image/screen/app_remote_control.png",
                    val: "远程控制"
                },
                {
                    src: "static/image/screen/app_same_screen.png",
                    val: "同屏观看"
                },
                {
                    src: "static/image/screen/app_sign_in.png",
                    val: "考勤签到"
                }
            ],
            allChangeAppList: [],
            flag: "工作台",
            changFlag: 0,
            globalOverScreen: false
        }
    },
    computed: {
        myInfo() {
            return this.$store.state.myInfo;
        },
        isConnectRemoteServer() {
            return this.$store.state.isConnectRemoteServer;
        }
    },
    watch: {
        isAutoOpenScreen() {
            if (this.isAutoOpenScreen) {
                this.flag = "同屏观看";
                let arr = this.tabList.filter(item => item == "同屏观看");
                if (arr.length == 0) this.tabList.push("同屏观看");
            }
        }
    },
    methods: {
        // 取消应用
        closeAppFn(item) {
            console.log(this.$store.state.screenRoomNo, "当前房间号")
            if (this.$store.state.screenRoomNo) {
                this.$confirm(`是否结束${item}?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.delOpenApp(item);
                    if (item == "同屏观看") this.globalOverScreen = true;
                }).catch(() => { });
            } else {
                this.delOpenApp(item);
            }

        },
        // 删除当前打开的应用
        delOpenApp(item) {
            for (let i in this.tabList) {
                if (this.tabList[i] == item) {
                    this.tabList.splice(i, 1);
                    break;
                }
            }
            this.flag = this.tabList[this.tabList.length - 1];
            this.$emit("initIsAutoOpenScreen");
        },
        // 点击应用
        appClickFn(item) {
            if (item == "同屏观看" && !this.isConnectRemoteServer) {
                this.$message({
                    message: "同屏服务器连接异常，请稍后再试",
                    type: "warning"
                });
                // 连接同屏中转服务器
                let screenInfo = this.$ShareScreenAssistance("ConnectRemoteServer", [`${this.myInfo.id}_PC`, this.myInfo.name, this.myInfo.headImage, this.myInfo.gender.toString()]);
                screenInfo = JSON.parse(screenInfo);
                if (screenInfo.return_code === "TRUE") this.$store.state.isConnectRemoteServer = true;
                console.log(this.$store.state.isConnectRemoteServer, "连接同屏中转服务器")
                return;
            }
            this.flag = item;
            for (let i in this.tabList) {
                if (this.tabList[i] == item) {
                    return;
                }
            }
            this.tabList.push(item);
        },
        // 筛选应用
        changeTabAppFn(allTabListItem, index) {
            this.changFlag = index;
            if (allTabListItem == "全部") {
                this.allChangeAppList = this.allAppList;
            } else if ((allTabListItem == "远程应用")) {
                this.allChangeAppList = [this.allAppList[0]];
            } else if ((allTabListItem == "同屏应用")) {
                this.allChangeAppList = [this.allAppList[1]];
            } else if ((allTabListItem == "签到应用")) {
                this.allChangeAppList = [this.allAppList[2]];
            }
        },
        // 同屏邀请
        getPersonFn(obj) {
            this.$emit("getPersonFn", obj);
        },
        // 重置全局结束同屏参数
        globalOverScreenFn() {
            this.globalOverScreen = false;
        }
    },
    created() {
        this.allChangeAppList = this.allAppList;
    }
}
</script>
<style lang="less" scoped>
.workbench {
    width: 100%;
    height: 100%;
    background: #ffffff;
    flex: 1;
    display: flex;
    flex-direction: column;

    .workbench_title {
        display: flex;
        width: 100%;
        height: 40px;
        padding: 8px 10px 0 10px;
        text-align: left;
        background: #ffffff;
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);
        border-top: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;

        div {
            border-radius: 10px 10px 0 0;
            width: 112px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #333333;
            background: #eeeeee;
            margin-right: 10px;
            cursor: pointer;

            span {
                margin-right: 20px;
            }
        }

        div:first-of-type {
            width: 100px;

            span {
                margin-right: 0;
            }
        }

        .workbench_title_checked {
            color: #ffffff;
            background: #fa7500;
        }
    }

    .workbench_content {
        flex: 1;
        text-align: left;
        padding-left: 36px;
        height: 100vh;

        .workbench_content_app {
            margin-top: 10px;

            .workbench_content_app_t {
                width: 100%;
                height: 48px;
                font-size: 16px;
                color: #333333;
                font-weight: bold;
                display: flex;
                align-items: center;
            }

            .workbench_content_app_n {
                display: flex;
                height: 30px;
                align-items: center;
                margin-bottom: 20px;

                div {
                    width: 80px;
                    height: 40px;
                    line-height: 40px;
                    margin-right: 10px;
                    font-size: 14px;
                    color: #222222;
                    font-weight: bold;
                    text-align: center;
                    cursor: pointer;
                }

                .workbench_content_app_n_bgc {
                    color: #fa7500;
                    border-bottom: 2px solid #fa7500;
                }
            }

            .workbench_content_app_c {
                display: flex;
                align-items: center;

                div {
                    width: 56px;
                    display: flex;
                    flex-direction: column;
                    margin-right: 80px;
                    cursor: pointer;

                    img {
                        width: 56px;
                        height: 56px;
                        margin-bottom: 10px;
                    }

                    div {
                        width: 56px;
                        height: 56px;
                        font-size: 14px;
                        color: #666666;
                    }
                }
            }
        }

        .workbench_content_now {
            border-bottom: 1px solid #eeeeee;
        }
    }
}
</style>